<template>
	<view>
		<view class="section-title">{{userRole === 'user' ? '职位列表' : '简历列表'}}</view>
		<view class="filter-bar">
			<view class="search-input-wrapper">
				<input v-model="search" :placeholder="userRole === 'user' ? '搜索职位/公司' : '搜索简历'" class="search-input" />
				<button @click="doSearch" class="search-btn">
					<text>搜索</text>
				</button>
			</view>
			<view class="filter-toggle" v-if="userRole === 'user'" @click="toggleFilter">
				<text>筛选条件</text>
				<text class="toggle-icon">{{showFilter ? '收起' : '展开'}}</text>
			</view>
			<view class="filter-options" v-if="userRole === 'user' && showFilter">
				<view class="filter-row">
					<view class="filter-item">
						<text style="width: 70px;">薪资范围：</text>
						<input v-model="minSalary" placeholder="最低" class="salary-input" />
						<text>-</text>
						<input v-model="maxSalary" placeholder="最高" class="salary-input" />
						<text>K</text>
					</view>
				</view>
				<view class="filter-row">
					<view class="filter-item">
						<text style="width: 70px;">工作地点：</text>
						<input v-model="address" placeholder="请输入地点" class="location-input" />
					</view>
				</view>
				<view class="filter-row">
					<view class="filter-item">
						<text style="width: 70px;">公司行业：</text>
						<input v-model="industry" placeholder="请输入行业" class="industry-input" />
					</view>
					<view class="filter-item">
						<text style="width: 70px;">紧急程度：</text>
						<picker @change="levelChange" :value="levelIndex" :range="levelOptions">
							<view class="picker">
								{{levelOptions[levelIndex]}}
							</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- 企业端筛选条件 -->
			<view class="filter-toggle" v-if="userRole === 'company'" @click="toggleResumeFilter">
				<text>筛选条件</text>
				<text class="toggle-icon">{{showResumeFilter ? '收起' : '展开'}}</text>
			</view>
			<view class="filter-options" v-if="userRole === 'company' && showResumeFilter">
				<view class="filter-row">
					<view class="filter-item">
						<text style="width: 80px;">工作经验：</text>
						<picker @change="expChange" :value="expIndex" :range="expOptions">
							<view class="picker">
								{{expOptions[expIndex]}}
							</view>
						</picker>
					</view>
					<view class="filter-item">
						<text style="width: 80px;">学历要求：</text>
						<picker @change="eduChange" :value="eduIndex" :range="eduOptions">
							<view class="picker">
								{{eduOptions[eduIndex]}}
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户端显示岗位列表 -->
		<view v-if="userRole === 'user'" class="job-list">
			<view class="job-card" v-for="(job, idx) in jobList" :key="idx" @click="toDetail(job)">
				<view class="card-header">
					<view class="tag-top" v-if="job.level === 'HIGH'">紧急</view>
					<view class="job-title">{{job.vacancyName}}</view>
					<view class="job-salary">{{job.salary}}</view>
				</view>
				<view class="card-tags">
					<view class="tag" v-if="job.edu">{{job.edu}}</view>
					<view class="tag" v-if="job.exp">{{job.exp}}</view>
				</view>
				<view class="card-company">
					<text class="company-name">{{job.company}}</text>
					<text class="company-name" style="color: gray">{{job.address}}</text>
					<view style="margin-top: 20px;">
						<image :src="job.posterPic" style="width: 40px; height: 40px; border-radius: 50%;"></image>
						<text style="color: gray">{{job.posterName}}</text>
					</view>
				</view>
				<view class="card-footer">
					<text class="publish-time">发布时间：{{new Date(job.createTime).toLocaleString() || '昨天'}}</text>
				</view>
			</view>
		</view>
		<!-- 企业端显示简历列表 -->
		<view v-else class="resume-list">
			<view class="resume-card" v-for="(resume, idx) in resumeList" :key="idx"
				@click="toResumeDetail(resume.userId)">
				<view class="resume-header">
					<u-avatar :src="resume.aviator" size="large" />
					<view class="resume-info">
						<view class="resume-name">{{resume.name}} · {{resume.age}}岁</view>
						<view class="resume-job">{{resume.job}}</view>
					</view>
				</view>
				<view class="resume-tags">
					<view class="tag" v-if="resume.degree">{{resume.degree}}</view>
					<view class="tag" v-if="resume.workExperience">工作经验：{{resume.workExperience}}</view>
					<view class="tag" v-if="resume.expectedSalary">期待薪资：{{resume.expectedSalary}}</view>
				</view>
				<view class="resume-desc">{{resume.description}}</view>
				<view class="resume-footer">
					<text class="publish-time">{{new Date(resume.createTime).toLocaleString()}}</text>
					<view>
						<button class="contact-btn" @click.stop="contactResume(resume)">联系</button>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" />
	</view>
</template>

<script>
	import {
		pageSearch
	} from '../../utils/api/modules/vacancy';
	import {
		personalResume,
		personalResumeList,
		resumePageSearch
	} from '../../utils/api/modules/user';

	export default {
		data() {
			return {
				search: '',
				jobList: [],
				resumeList: [],
				userRole: '',
				minSalary: '',
				maxSalary: '',
				address: '',
				industry: '',
				level: '',
				levelIndex: 0,
				levelOptions: ['全部', '普通', '较紧急', '紧急'],
				loadStatus: 'loading',
				pageNum: 1,
				pageSize: 10,
				showFilter: false,
				// 简历筛选相关
				showResumeFilter: false,
				expIndex: 0,
				expOptions: ['全部', '应届生', '1-3年', '3-5年', '5-10年', '10年以上'],
				expMap: {
					0: '', // 全部
					1: '应届生', // 应届生
					2: '1-3年', // 1-3年
					3: '3-5年', // 3-5年
					4: '5-10年', // 5-10年
					5: '10年以上' // 10年以上
				},
				eduIndex: 0,
				eduOptions: ['全部', '大专', '本科', '硕士', '博士']
			}
		},
		onLoad() {
			// 获取用户角色
			const user = uni.getStorageSync('user');
			if (user && user.role) {
				this.userRole = user.role;
			}

			if (this.userRole === 'user') {
				this.loadJobList();
			} else {
				this.loadResumeList();
			}
		},
		methods: {
			loadJobList() {
				if (this.userRole == 'user') {
					const params = {
						pageSize: this.pageSize,
						pageNum: this.pageNum,
						vacancyName: this.search,
						minSalary: this.minSalary ? this.minSalary + 'k' : '',
						maxSalary: this.maxSalary ? this.maxSalary + 'k' : '',
						address: this.address,
						industry: this.industry,
						level: this.level
					};

					pageSearch(params).then(res => {
						if (this.pageNum === 1) {
							this.jobList = res.data.records;
						} else {
							this.jobList = [...this.jobList, ...res.data.records];
						}
						this.loadStatus = this.pageNum * this.pageSize >= res.data.total ? 'nomore' : 'loadmore';
					});
				} else if (this.userRole == 'company') {
					const params = {
						pageSize: this.pageSize,
						pageNum: this.pageNum,
						search: this.search,
						workExperience: this.expIndex === 0 ? '' : this.expOptions[this.expIndex],
						degree: this.eduIndex === 0 ? '' : this.eduOptions[this.eduIndex],
					}
					resumePageSearch(params).then(res => {
						if (this.pageNum === 1) {
							this.resumeList = res.data.records;
						} else {
							this.resumeList = [...this.resumeList, ...res.data.records];
						}
						this.loadStatus = this.pageNum * this.pageSize >= res.data.total ? 'nomore' : 'loadmore';
					});
					
				}
			},
			loadResumeList() {
				// 获取简历列表
				personalResumeList().then(res => {
					this.resumeList = res || [];
				});
			},
			doSearch() {
				this.pageNum = 1;
				this.loadJobList();
			},
			levelChange(e) {
				this.levelIndex = e.detail.value;
				const levelMap = {
					0: '',
					1: 'LOW',
					2: 'MEDIUM',
					3: 'HIGH'
				};
				this.level = levelMap[this.levelIndex];
				this.doSearch();
			},
			toDetail(job) {
				uni.navigateTo({
					url: `/pages/vacancy/vacancy-detail?id=${job.id}`
				});
			},
			toResumeDetail(userId) {
				uni.navigateTo({
					url: `/pages/mine/personal?id=${userId}`
				});
			},
			contactResume(resume) {
				uni.navigateTo({
					url: `/pages/message/message-detail?id=${resume.userId}&otherPic=${resume.aviator}&otherNickName=${resume.name}`
				});
			},
			toggleFilter() {
				this.showFilter = !this.showFilter;
			},
			toggleResumeFilter() {
				this.showResumeFilter = !this.showResumeFilter;
			},
			expChange(e) {
				this.expIndex = e.detail.value;
			},
			eduChange(e) {
				this.eduIndex = e.detail.value;
				this.doResumeSearch();
			},
			doResumeSearch() {
				// 这里添加简历筛选逻辑
				const params = {
					search: this.search,
					workExperience: this.expMap[this.expIndex],
					degree: this.eduIndex === 0 ? '' : this.eduOptions[this.eduIndex]
				};
				// 调用简历搜索API
				personalResumeList(params).then(res => {
					this.resumeList = res || [];
				});
			}
		},
		onReachBottom() {
			if (this.loadStatus === 'loadmore') {
				this.pageNum++;
				this.loadJobList();
			}
		},
		onShow() {
			uni.$on('refreshVacancyList', () => {
				if (this.userRole === 'user') {
					this.loadJobList();
				} else {
					this.loadResumeList();
				}
			});
		}
	}
</script>

<style lang="scss">
	/* 文本溢出省略号 mixin */
	@mixin text-ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.section-title {
		margin: 32rpx 20rpx 12rpx 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.filter-bar {
		padding: 20rpx;
		background-color: #fff;
	}

	.search-input-wrapper {
		display: flex;
		margin-bottom: 20rpx;
	}

	.filter-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0;
		margin: 10rpx 0;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		cursor: pointer;

		.toggle-icon {
			margin-left: 10rpx;
			color: #2d8cf0;
			font-size: 24rpx;
		}
	}

	.filter-options {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.filter-row {
		display: flex;
		margin-bottom: 20rpx;
	}

	.filter-item {
		flex: 1;
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		min-width: 60%;
	}

	.salary-input {
		width: 100rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		margin: 0 10rpx;
	}

	.location-input,
	.industry-input {
		flex: 1;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
	}

	.picker {
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		min-width: 120rpx;
	}

	.search-input {
		flex: 1;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 10rpx;
		margin-right: 10rpx;
	}

	.search-btn {
		background: #2d8cf0;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		height: 40px;
	}

	.job-list {
		padding: 0 20rpx;
	}

	.job-card {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx #f0f1f2;
		margin-bottom: 24rpx;
		padding: 24rpx 20rpx 16rpx 20rpx;
		position: relative;
	}

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tag-top {
		background: #ff4d4f;
		color: #fff;
		font-size: 22rpx;
		border-radius: 6rpx;
		padding: 2rpx 10rpx;
		margin-right: 12rpx;
	}

	.job-title {
		font-size: 28rpx;
		font-weight: bold;
		flex: 1;
		margin-right: 10rpx;
	}

	.job-salary {
		color: #ff4d4f;
		font-size: 26rpx;
		font-weight: bold;
	}

	.card-tags {
		display: flex;
		margin: 12rpx 0 0 0;
	}

	.tag {
		background: #f5f5f5;
		color: #888;
		font-size: 22rpx;
		border-radius: 8rpx;
		padding: 4rpx 14rpx;
		margin-right: 12rpx;
	}

	.card-company {
		margin: 10rpx 0 0 0;
		font-size: 24rpx;
		color: #333;
		display: flex;
		flex-direction: column;
	}

	.company-name {
		font-weight: bold;
		margin-right: 10rpx;
	}

	.company-auth {
		font-size: 22rpx;
		color: #faad14;
	}

	.card-footer {
		display: flex;
		width: 100%;
		align-items: center;
		margin-top: 16rpx;
	}

	.publish-time {
		color: #aaa;
		font-size: 22rpx;
	}

	.apply-btn {
		background: #54bcbd;
		color: #fff;
		border: none;
		border-radius: 20rpx;
		font-size: 26rpx;
		width: 34%;
		float: right;
	}

	/* 简历列表样式 */
	.resume-list {
		padding: 0 20rpx;
	}

	.resume-card {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx #f0f1f2;
		margin-bottom: 24rpx;
		padding: 24rpx 20rpx 16rpx 20rpx;
	}

	.resume-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.resume-info {
		margin-left: 20rpx;
	}

	.resume-name {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 4rpx;
	}

	.resume-job {
		font-size: 24rpx;
		color: #2d8cf0;
	}

	.resume-tags {
		display: flex;
		margin: 12rpx 0;
	}

	.resume-desc {
		font-size: 24rpx;
		color: #666;
		margin: 12rpx 0;
		line-height: 1.5;
	}

	.resume-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;

		.contact-btn {
			background: #54bcbd;
			color: #fff;
			border: none;
			border-radius: 20rpx;
			font-size: 26rpx;
			padding: 4rpx 20rpx;
			width: 120rpx;
		}
	}

	.resume-search {
		padding: 20rpx;
	}

	.resume-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.resume-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.resume-header .avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.resume-info {
		flex: 1;
	}

	.resume-info .name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.resume-info .job {
		font-size: 28rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.resume-details {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.resume-details text {
		font-size: 26rpx;
		color: #666;
		background: #f5f5f5;
		padding: 6rpx 16rpx;
		border-radius: 6rpx;
	}

	.resume-description {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.load-more {
		text-align: center;
		padding: 10rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		margin-top: 20rpx;
		cursor: pointer;
	}
</style>